<template>
  <view class="tag-filter">
    <scroll-view scroll-x class="tag-scroll" show-scrollbar="false">
      <view class="tag-list">
        <view 
          v-for="tag in tags" 
          :key="tag.id" 
          class="tag-item" 
          :class="{ active: currentTag === tag.id }"
          @click="handleTagClick(tag.id)"
        >
          {{ tag.name }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const emit = defineEmits(['change']);

// 从props接收标签列表，如果没有传入，则从store获取
const props = defineProps({
  tags: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: String,
    default: 'all'
  }
});

// 当前选中的标签
const currentTag = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 标签点击事件
const handleTagClick = (tagId) => {
  currentTag.value = tagId;
  emit('change', tagId);
};
</script>

<style lang="scss" scoped>
.tag-filter {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 10;
  
  .tag-scroll {
    width: 100%;
    white-space: nowrap;
    padding: 0;
    
    .tag-list {
      display: inline-flex;
      padding: 12px 10px;
      
      .tag-item {
        padding: 8px 15px;
        margin-right: 12px;
        font-size: 14px;
        color: #666666;
        background-color: #f8f8f8;
        border-radius: 20px;
        transition: all 0.3s;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        
        &.active {
          color: #ffffff;
          background-color: #007aff;
          font-weight: 500;
          box-shadow: 0 2px 5px rgba(0, 122, 255, 0.2);
        }
        
        &:last-child {
          margin-right: 10px;
        }
        
        &:active {
          opacity: 0.8;
          transform: scale(0.98);
        }
      }
    }
  }
}
</style>
